<template>
  <div class="container">
    <div class="top">
      <van-nav-bar title="神领物流" style="margin: 40px 0px; " />
    </div>
    <div>
      <van-row type="flex" justify="space-between" style="margin: 20px;">
        <van-col span="12" style="font-size: 24px; font-weight: 700;">账号登录</van-col>
        <van-col span="10" style="color:red; margin-left: 10px; padding-top: 8px;">手机号登录<van-icon name="play" /></van-col>
      </van-row>
    </div>
    <van-form @submit="onSubmit" style="padding: 0 20px;">
      <van-field v-model.trim="form.account" clearable placeholder="请输入账号"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model.trim="form.password" :type="isShow ? 'password' : 'text'" :right-icon="isShow ? 'closed-eye' : 'eye-o'"
        placeholder="请输入密码" @click-right-icon="handleClickIcon" :rules="[{ required: true, message: '请填写密码' }]" />
      <!-- <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="text" style="border:none;background-color: #fff;">发送验证码</van-button>
        </template>
      </van-field> -->
      <div style="margin: 30px 0;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import { login } from '@/api/index'
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        account: 'hbsj002',
        password: '123456'
      },
      isShow: true
    }
  },
  methods: {
    async onSubmit (value) {
      // console.log(value)
      // await value.validate()
      const res = await login(this.form)
      // console.log(res)
      this.$store.dispatch('setToken', res.data.data)
      this.$router.push('/')
    },
    handleClickIcon () {
      console.log(this.isShow)
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped lang="less">
.container{
  background-color: #fff;
}
.top {
  font-weight: 700;

  ::v-deep .van-nav-bar__title {
    font-weight: 700 !important;
    font-size: 18px;
  }
}
</style>
